{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-product-single">
            <div class="el-site">
                <div class="catalog">
                    <a class="title item">当前分类</a>
                    {volist name=":catalog_child($catalog.id)" id="item"}
                    <a class="item" href="{$item.url}">{$item.title}</a>
                    {/volist}
                </div>
                <div class="recommend">
                    <a class="title item">推荐产品</a>
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            {volist name=":product(['isrecommend'])" id="item"}
                            <div class="swiper-slide">
                                <a href="{$item.url}">
                                    <img src="{$item.cover}">
                                </a>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
            <div class="el-mian">
                <el-row :gutter="40">
                    <el-col :md="12" :sm="24">
                        <div class="el-big-swiper">
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    {volist name="single.images" id="item"}
                                    <div class="swiper-slide">
                                        <el-image src="{$item.url}" :preview-src-list="common.arrayColumn(single.images, 'url')"></el-image>
                                    </div>
                                    {/volist}
                                </div>
                            </div>
                        </div>
                        <div class="el-small-swiper">
                            <div thumbsslider="" class="swiper">
                                <div class="swiper-wrapper">
                                    {volist name="single.images" id="item"}
                                    <div class="swiper-slide"><img src="{$item.url}"></div>
                                    {/volist}
                                </div>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </el-col>
                    <el-col :md="12" :sm="24">
                        <div class="el-product-title">{$single.title}</div>
                        <div class="el-product-spec">
                            <div class="spec" v-for="(spec, specIndex) in single.spec">
                                <template v-for="item in spec.value">
                                    <div 
                                        v-if="spec.type === 0" 
                                        class="item title" 
                                        :class="{active: skuTitle.indexOf(item.title) !== -1}"
                                        @click="specCilick(specIndex, item.title)">
                                        {{item.title}}
                                    </div>
                                    <div 
                                        v-if="spec.type === 1" 
                                        class="item color" 
                                        :class="{active: skuTitle.indexOf(item.title) !== -1}"
                                        :title="item.title" 
                                        @click="specCilick(specIndex, item.title)">
                                        <div :style="{backgroundColor: item.color}"></div>
                                    </div>
                                    <img 
                                        v-if="spec.type === 2" 
                                        class="item cover"  
                                        :class="{active: skuTitle.indexOf(item.title) !== -1}"
                                        :src="item.cover" 
                                        :title="item.title"
                                        @click="specCilick(specIndex, item.title)">
                                </template>
                            </div>
                            
                        </div>
                        <div class="el-price-stock">
                            <div class="el-product-price">
                                价格：
                                <template v-if="sku == ''">{{single.sale_price}}</template>
                                <template v-else>{{sku.sale_price}}</template>
                            </div>
                            <div class="el-product-stock">
                                库存：
                                <template v-if="sku == ''">{{single.stock}}</template>
                                <template v-else>{{sku.stock}}</template>
                            </div>
                        </div>
                        <div class="el-price-stock">
                            <el-button 
                                :type="sku == '' ? 'info' : 'warning'" 
                                size="small" 
                                icon="el-icon-shopping-cart-2"
                                @click="addCart()">
                                添加到购物车
                            </el-button>
                        </div>
                        <div class="el-next-prev">
                            <div class="item prev">
                                上一页：{empty name="single.prev"}没有了{else/}<a href="{$single.prev.url}">{$single.prev.title}</a>{/empty}
                            </div>
                            <div class="item next">
                                下一页：{empty name="single.next"}没有了{else/}<a href="{$single.next.url}">{$single.next.title}</a>{/empty}
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-tabs type="card">
                    <el-tab-pane label="产品详情">{$single.content|raw}</el-tab-pane>
                    <el-tab-pane label="产品参数">
                        <div class="el-parameter">
                            {volist name="single.parameter" id="item"}
                            <div class="item"><span class="title">{$item.title}：</span><span class="value">{$item.value}</span></div>
                            {/volist}
                        </div>
                    </el-tab-pane>
                 </el-tabs>
             </div>
         </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                sku: "",
                skuTitle: [],
                single: {:json_encode($single)},
            }
        },
        created() {
            let self = this;
            self.single.spec.forEach(function (item, index) {
                self.skuTitle[index] = "";
            })
        },
        mounted() {
            new Swiper(".el-big-swiper .swiper", {
                spaceBetween: 10,
                thumbs: {
                    swiper: {
                        el: ".el-small-swiper .swiper",
                        spaceBetween: 10,
                        slidesPerView: 4,
                        freeMode: true,
                        watchSlidesProgress: true,
                        navigation: {
                            nextEl: ".el-small-swiper .swiper-button-next",
                            prevEl: ".el-small-swiper .swiper-button-prev",
                        },
                    }
                },
            });
            new Swiper(".recommend .swiper", {
                direction:'vertical',
                slidesPerView: 6,
                spaceBetween: 10,
            });
        },
        methods: {
            /**
             * 规格选择
             */
            specCilick(index, title) {
                let self = this;
                self.sku = "";
                self.$set(self.skuTitle, index, self.skuTitle.indexOf(title) === -1 ? title : '');
                let skuTitle = self.skuTitle.join(',');
                self.single.sku.forEach(function (item, index) {
                    if (item.title === skuTitle) {
                        self.sku = item;
                    }
                });
            },
            /**
             * 加入购物车
             */
            addCart() {
                let self = this;
                if (self.sku !== '') {
                    post('api/cms/UserProductCart/save', {id: self.single.id, product_sku: self.sku.title}, function (res) {
                        self.$notify({message: res.message, type: res.status});
                    })
                }
            },
        }
    })
</script>
{include file="common/footer"}